<template>
  <div class="container">
    <div ref="searchBox">
      <el-form ref="modelForm" :model="queryPrams">
        <SearchArea
          :listUrl="pageUrl.list"
          @ok="getListData(pageUrl.list)"
          @reset="handleReset(modelForm, {}, pageUrl.list)"
        >
          <el-col :span="8">
            <BaseInput
              label="用户昵称"
              v-model="queryPrams.userName"
              prop="userName"
              :clearable="true"
            >
            </BaseInput>
          </el-col>
          <el-col :span="8">
            <BaseSelect
              label="日报状态"
              v-model="queryPrams.taskReport"
              :options="[
                [true, '已发送'],
                [false, '未发送'],
              ]"
              prop="taskReport"
              :clearable="true"
            >
            </BaseSelect>
          </el-col>
          <el-col :span="8">
            <BaseSelect
              label="签到状态"
              v-model="queryPrams.taskSign"
              :options="[
                [true, '已重置'],
                [false, '未重置'],
              ]"
              prop="taskSign"
              :clearable="true"
            >
            </BaseSelect>
          </el-col>
        </SearchArea>
      </el-form>
    </div>
    <div class="list">
      <el-table
        :data="dataSourse"
        :max-height="tableHeight"
        :border="false"
        :highlight-current-row="true"
        row-key="uid"
      >
        <el-table-column type="index" align="center" label="序号" width="100" />

        <el-table-column
          prop="taskCreateDate"
          align="center"
          label="创建时间"
        />

        <el-table-column prop="taskReport" align="center" label="日报推送">
          <template #default="scope">
            <el-button
              :type="reportStatus(scope.row, 'taskReport', 'type')"
              link
              >{{ reportStatus(scope.row, "taskReport", "desc") }}</el-button
            >
          </template>
        </el-table-column>

        <el-table-column prop="taskSign" align="center" label="重置签到">
          <template #default="scope">
            <el-button
              :type="reportStatus(scope.row, 'taskSign', 'type')"
              link
              >{{ reportStatus(scope.row, "taskSign", "desc") }}</el-button
            >
          </template>
        </el-table-column>

        <el-table-column prop="taskSign" align="center" label="任务说明">
          <template #default>
            <span>系统自动创建</span>
          </template>
        </el-table-column>
      </el-table>
      <BasePagination
        :pageSourse="pageSourse"
        :pageSizes="[10, 20, 30, 50]"
        :queryPrams="queryPrams"
        :listUrl="pageUrl.list"
        layout="total, pager, jumper, sizes"
        @onSearch="getListData(pageUrl.list)"
      >
      </BasePagination>
    </div>
  </div>
</template>

<script setup lang="ts" name="admin-task">
import * as api from "@/api/index";
import { ref, onMounted } from "vue";

import type { FormInstance } from "element-plus";
import usePageListData from "@/publicTs/pageListData";

let {
  pageSourse,
  dataSourse,
  queryPrams,
  handleReset,
  getListData,
  computedTableHeight,
} = usePageListData();

// form表单实例
let modelForm = ref<any>();
// 检索区元素
const searchBox: any = ref(null);

// 列表相关url
let pageUrl = {
  list: api.admin.URL_TASKLIST,
};
// table渲染高度
let tableHeight = ref(600);
onMounted(() => {
  handleReset(modelForm.value, {}, pageUrl.list);
  tableHeight.value = computedTableHeight(searchBox.value);
});

/**
 * @param row 当前行数据
 * @param reportName 访问的属性
 * @param type 渲染类型 type | desc
 */
function reportStatus(row: any, reportName: string, type: string) {
  let nowDate = new Date(new Date().toLocaleDateString()).getTime();
  let reportDate = new Date(row.taskDate).getTime();
  if (nowDate > reportDate && !row[reportName]) {
    return type === "desc" ? "未完成" : "danger";
  }
  return row[reportName]
    ? type === "desc"
      ? "已完成"
      : "success"
    : type === "desc"
    ? "待完成"
    : "primary";
}
</script>

<style lang="less" scoped>
.container {
}
</style>
